// new Method('.box1')
// new Method('.box2')


function Method(boxName) {
    // 1 每隔1s切换图片
    // 1.1 定时器外面-定义全局变量num默认1

    var box = boxName

    let num = 1
    let t = null

    function startLbt() {
        // setInterval( ()=>{}, 毫秒)
        // let t = setInterval( ()=>{  块级作用于 后面无法清除
        t = setInterval(() => {
            // 1.2 定时器里面-num++ 
            num++
            if (num > 6) num = 1
            // 1.3 定时器里面-修改图片地址
            // document.querySelector('img').src = './imgs/img3.jpg'
            document.querySelector(box + ' img').src = `./imgs/img${num}.jpg`
            // 1.4 定时器里面-同步圆圈：获取选中的圆圈直接清除，给当前加
            document.querySelector(box + ' li.active').className = ''
            let ulLiObjs = document.querySelectorAll(box + ' li')
            // ulLiObjs[????].className = 'activbe'
            ulLiObjs[num - 1].className = 'active'
        }, 1000)
    }

    startLbt()  //首次打开网页得触发

    // 2 鼠标移入到分页器/也就是小圆圈上：至少得停止定时器，并且同步图片.....
    // 2.1 获取所有的分页器
    let pageObjs = document.querySelectorAll(box + ' li')
    // 2.2 遍历
    pageObjs.forEach((item, i) => { // item每个li标签对象 i就是这个li对应的索引
        // 2.3 绑定移入事件
        item.onmouseover = function () {
            // 2.4 事件处理函数中 - 清除定时器
            clearInterval(t)
            // 2.5 事件处理函数中 - 同步图片
            document.querySelector(box + ' img').src = `./imgs/img${i + 1}.jpg`
            // 2.6 事件处理函数中 - 同步索引（切记跟图片对应起来）
            num = i + 1
            // 2.7 事件处理函数中 - 同步圆圈    
            document.querySelector(box + ' li.active').className = ''
            document.querySelectorAll(box + ' li')[i].className = 'active'
        }

        // 3 鼠标移出：重新开启定时器
        item.onmouseout = function () {
            startLbt()
        }
    })
}
export default Method;
